<template>
  <div class="backtop BackTop-wrapper_3XDbcaq" v-show="isShow" @click="backTop">
    <img src="" class="BackTop-icon_2Js4K94">
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.toggle)
  },
  methods: {
    toggle () {
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop >= clientHeight) {
        this.isShow = true
      } else if (scrollTop === 0) {
        this.isShow = false
      }
    },
    backTop () {
      if (window.pageYOffset) {
        window.pageYOffset = 0
      }
      if (document.documentElement.scrollTop) {
        document.documentElement.scrollTop = 0
      } else {
        document.body.scrollTop = 0
      }
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.backtop {
  z-index: 3;
}
.BackTop-wrapper_3XDbcaq {
  position: fixed;
  right: 0.4rem;
  right: 4vw;
  bottom: 2rem;
  bottom: 20vw;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 1.133333rem;
  width: 11.333333vw;
  height: 1.133333rem;
  height: 11.333333vw;
  border: 0.013333rem solid #999;
  border: 0.133333vw solid #999;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  will-change: transform;
}
.BackTop-icon_2Js4K94 {
  width: 0.533333rem;
  width: 5.333333vw;
  height: 0.533333rem;
  height: 5.333333vw;
}
</style>
